<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header-top {
            text-align: center;
            background: #18BEBE;
        }

        .container {
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .site-header {
            margin-left: 22px;
            margin-top: 30px;
        }

        .site-header a {
            color: #333;
            text-decoration: none;
        }

        .tbe {
            margin: 20px 0;
            height: 170px;
            width: 1000px;
            background-color: #D5D6D6;
            padding: 10px 0;
        }

        .tbe>table {
            /* margin: 10px; */
            /* padding: 10px; */
            box-sizing: border-box;
            /* border-collapse: collapse; */
            height: 170px;
            text-align: center;
            margin-left: 12px;
        }

        .tbe th {
            color: #18BEBE;
        }

        .tbe td,
        .tbe th {
            /* border: 2px solid #333; */
            padding: 10px;
            /* width: 80px; */
        }

        .Checked {
            background: #fff;
            border: 2px solid #ffa631;
            padding: 5px;
        }

        .container-centre {
            position: relative;
            margin: 20px 0;
            padding: 20px;
            background-color: #D5D6D6;
        }

        .container-centre>span {
            margin-right: 8px;
        }

        .container-centre input {
            line-height: 22px;
            margin-left: 50px;
            width: 240px;
        }

        .container-centre button {
            background: #fff;
            margin-left: -40px;
            border: none;
            position: relative;
        }

        .container-centre button>img {
            margin-left: -24px;
            margin-top: -3px;
            position: absolute;
            background: white;
        }

        .centre-last {
            position: absolute;
            right: 5px;
            color: #18BEBE;
        }

        .centre-img {
            position: absolute;
            right: 240px;
        }

        .container-body>div {
            float: left;
            padding: 15px;
            /* border: 1px solid #333; */
            background: #D5D6D6;
            margin-right: 16px;
            margin-bottom: 20px;
        }

        .container-body>.body-last {
            margin-right: 0px;
        }

        .container-body {
            overflow: hidden;
        }

        .container-body p {
            line-height: 25px;
        }

        .container-body span {
            font-size: 18px;
            font-weight: bold;
        }

        .container-body .clr {
            color: #18BEBE;
        }

        .container-bottom {
            margin-top: 10px;
        }

        .container-bottom a {
            text-decoration: none;
            color: black;
            margin: 0 5px;
        }

        .container-bottom>.a-frist {
            margin-left: 20px;
        }

        .container-bottom>.a-last {
            margin-right: 25px;
        }

        .container-bottom>.a-second {
            border-bottom: 1px solid #ffa631;
            color: #ffa631;
        }

        .container-bottom button {
            line-height: 30px;
            height: 30px;
            width: 120px;
            font-size: 18px;
            border: none;
        }

        .container-bottom .btn-last {
            margin-left: 50px;
            width: 60px;
            background: #ffa631;
            color: #fff;
        }

        .container-bottom .span-frist {
            margin-left: 30px;
        }

        .container-bottom input {
            height: 25px;
            width: 25px;
        }

        .container-last {
            margin-top: 30px;
            overflow: hidden;
        }

        .container-last>.qrcode {
            float: left;
        }

        .container-last>.tip {
            float: left;
            margin-left: 25px;
        }

        .container-last h3 {
            color: #18BEBE;
            padding-top: 8px;
            line-height: 30px;
            margin-bottom: 5px;
        }

        .body-last {
            background: #515151;
            overflow: hidden;
        }

        .body-last-container {
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
            position: relative;
            background: #515151;
        }

        .body-last-container .declaration {
            width: 326px;
            font-size: 12px;
            line-height: 20px;
            color: #fff;
        }

        .declaration {
            float: left;
            margin-left: 20px;
        }

        .table-about {
            left: 45%;
            top: 45%;
            position: absolute;
            float: left;
            text-align: left;
        }

        .declaration>div {
            padding-top: 30px;
            margin-bottom: 10px;
        }

        .declaration>h5 {
            padding-bottom: 5px;
        }

        .declaration>p {
            color: #D5D6D6;
        }

        .table-about td {
            width: 140px;
        }

        .table-about .last-line {
            width: 45px;
        }

        .table-about .second-line {
            width: 170px;
        }

        .body-last-bottom {
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
            border-top: 2px solid #D5D6D6;
            margin-top: 30px;
        }

        .body-last-bottom>.bottom-left {
            float: left;
            margin: 20px;
            color: #D5D6D6;
            font-size: 12px;
        }

        .body-last-bottom>.bottom-right {
            float: right;
            margin: 20px 0px;
            color: #D5D6D6;
            font-size: 12px;
        }

        .Navbar {
            background: #D5D6D6;
        }

        .Navbar-body {
            width: 1000px;
            height: 40px;
            background: #D5D6D6;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            overflow: hidden;
            position: relative;
        }

        .Navbar-body>table {
            position: absolute;
            float: left;
            left: 30%;
            line-height: 40px;
        }
        .Navbar-body td{
            width: 90px;
        }
        .Navbar-body table a {
            font-size: 20px;
            font-weight: bold;
        }
        .Navbar-body a{
            color: #333;
            text-decoration: none;
        }
        .Navbar-left>img{
         margin-top: 10px;
         margin-left: -30px;
         position: absolute;
        }
        .Navbar-left {
            float: left;
            left: 30px;
            line-height: 40px;
            font-size: 12px;
            position: relative;
        }

        .Navbar-right {
            float: right;
            line-height: 40px;
            font-size: 12px;
            position: relative;
        }
        .Navbar-right>img{
         margin-top: 10px;
         margin-left: -25px;
         position: absolute;
        }
    </style>
</head>

<body>
    <div class="header-top">
        <img src="images/logo.png" alt="logo">
    </div>
    <div class="Navbar">
        <div class="Navbar-body">
            <div class="Navbar-left">
                <img src="images/location.png" alt="">
                <a href="#">深圳 &lt;切换&gt;</a>
            </div>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <a href="#">首页</a>
                        </td>
                        <td>
                            <a href="#">资讯</a>
                        </td>
                        <td>
                            <a href="#">测评</a>
                        </td>
                        <td>
                            <a href="#">商城</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="Navbar-right">
                <img src="images/adm.png" alt="">
                <a href="#">个人中心</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="site-header">
            <a href="#">首页</a>
            <span>></span>
            <a href="#">预防装修污染</a>
            <span>></span>
            <a href="#">材料库</a>
        </div>
        <div class="tbe">
            <table>
                <tbody>
                    <tr>
                        <th>类别</th>
                        <td>全部</td>
                        <td>
                            <span class="Checked">地板</span>
                        </td>
                        <td>涂料</td>
                        <td>墙纸</td>
                        <td>瓷砖</td>
                        <td>粘胶剂</td>
                        <td>家具</td>
                        <td>板材</td>
                        <td>饰品</td>
                        <td>
                            <img src="images/indexSelect.png" alt="倒三角">
                        </td>
                    </tr>
                    <tr>
                        <th>类型</th>
                        <td>全部</td>
                    </tr>
                    <tr>
                        <th>材质</th>
                        <td>全部</td>
                        <td>
                            <span class="Checked">实木</span>
                        </td>
                        <td>复合</td>
                        <td>强化</td>
                        <td>其他</td>
                    </tr>
                    <tr>
                        <th>品牌</th>
                        <td>全部</td>
                        <td>
                            <span class="Checked">圣象</span>
                        </td>
                        <td>大自然</td>
                        <td>生活家</td>
                        <td>北美风情</td>
                        <td>德尔</td>
                        <td>博典</td>
                        <td>船王</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="container-centre">
            <span>发布时间
                <img src="images/downicon.png" alt="">
            </span>
            <span> 价格
                <img src="images/upicon.png" alt="">
            </span>
            <span>环保节能
                <img src="images/upicon.png" alt="">
            </span>
            <input type="text">
            <button>
                <img src="images/icon4.png" alt="">搜索</button>
            <img class="centre-img" src="images/wenhao.png" alt="">
            <span class="centre-last">了解家居医生建材环保评级标准</span>
        </div>
        <div class="container-body">
            <div>
                <a href="#">
                    <img src="images/data_image.png" alt="">
                </a>
                <p>德尔 都市系列3001</p>
                <p>木地板 -复合地板</p>
                <p>单价:128元/㎡</p>
                <p class="clr">
                    <span>环保评级：B </span>(可以使用)</p>
            </div>
            <div>
                <a href="#">
                    <img src="images/data_image.png" alt="">
                </a>
                <p>德尔 都市系列3001</p>
                <p>木地板 - 复合地板</p>
                <p>单价: 128元/㎡</p>
                <p class="clr">
                    <span>环保评级：B </span>(可以使用)</p>
            </div>
            <div>
                <a href="#">
                    <img src="images/data_image.png" alt="">
                </a>
                <p>德尔 都市系列3001</p>
                <p>木地板 -复合地板</p>
                <p>单价:128元/㎡</p>
                <p class="clr">
                    <span>环保评级：B </span>(可以使用)</p>
            </div>
            <div class="body-last">
                <a href="#">
                    <img src="images/data_image.png" alt="">
                </a>
                <p>德尔 都市系列3001</p>
                <p>木地板 -复合地板</p>
                <p>单价:128元/㎡</p>
                <p class="clr">
                    <span>环保评级：B </span>(可以使用)</p>
            </div>
            <div>
                <a href="#">
                    <img src="images/data_image.png" alt="">
                </a>
                <p>德尔 都市系列3001</p>
                <p>木地板 -复合地板</p>
                <p>单价:128元/㎡</p>
                <p class="clr">
                    <span>环保评级：B </span>(可以使用)</p>
            </div>
            <div>
                <a href="#">
                    <img src="images/data_image.png" alt="">
                </a>
                <p>德尔 都市系列3001</p>
                <p>木地板 - 复合地板</p>
                <p>单价: 128元/㎡</p>
                <p class="clr">
                    <span>环保评级：B </span>(可以使用)</p>
            </div>
            <div>
                <a href="#">
                    <img src="images/data_image.png" alt="">
                </a>
                <p>德尔 都市系列3001</p>
                <p>木地板 -复合地板</p>
                <p>单价:128元/㎡</p>
                <p class="clr">
                    <span>环保评级：B </span>(可以使用)</p>
            </div>
            <div class="body-last">
                <a href="#">
                    <img src="images/data_image.png" alt="">
                </a>
                <p>德尔 都市系列3001</p>
                <p>木地板 -复合地板</p>
                <p>单价:128元/㎡</p>
                <p class="clr">
                    <span>环保评级：B </span>(可以使用)</p>
            </div>
        </div>
        <div class="container-bottom">
            <button>上一页</button>
            <a class="a-frist" href="#">1</a>
            <a class="a-second" href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a class="a-last" href="#">5</a>
            <button>下一页</button>
            <span class="span-frist">共有10页，去第</span>
            <input type="text">
            <span>页</span>
            <button class="btn-last">确定</button>
        </div>
        <div class="container-last">
            <div class="qrcode">
                <img src="images/small_weixin.png" alt="">
            </div>
            <div class="tip">
                <h3>建材检测 需求反馈</h3>
                <p>亲爱的用户，我们正在不断的完善和更新建材库，</p>
                <p>若没有找到您想要的材料信息，请将您想测的建材告诉我们</p>

            </div>
        </div>
    </div>
    <div class="body-last">
        <div class="body-last-container">
            <div class="declaration">
                <div>
                    <img src="images/footerLogo.png" alt="">
                </div>
                <h5>为室内坏境健康把好每一关</h5>
                <p>家具医生致力于中国人的家具健康问题，通过专业的技术研究和测评，倾力于协助大众打造绿色、怀抱的人居生活坏境。</p>
            </div>
            <div class="table-about">
                <table>
                    <tbody>
                        <tr>
                            <td>关于我们</td>
                            <td class="second-line">版权说明</td>
                            <td class="last-line">
                                <img src="images/weixin2.png" alt="">
                            </td>
                            <td>官方微信</td>
                        </tr>
                        <tr>
                            <td>联系我们</td>
                            <td class="second-line">用户隐私</td>
                            <td class="last-line">
                                <img src="images/tianmao.png" alt="">
                            </td>
                            <td> 天猫旗舰店</td>
                        </tr>
                        <tr>
                            <td>加入我们</td>
                            <td class="second-line">免责申明</td>
                            <td class="last-line">
                                <img src="images/shop.png" alt="">
                            </td>
                            <td>有赞商城</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
        <div class="body-last-bottom">
            <p class="bottom-left">深圳建筑科学研究院股份有限公司 家居医生网</p>
            <p class="bottom-right">粤ICP备08011321号 @Copyringht All Rights Reserved</p>
        </div>
    </div>
</body>

</html>